<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<h1>基本语法的使用！</h1>
<div id="app">
    <span v-bind:title="message">
        鼠标悬停事件！
    </span>
</div>
<div id="if">
    <h3 v-if="test">Yes!</h3>
    <h3 v-else>No!</h3>
    <hr>
    <h3 v-if="type==='A'">A</h3>
    <h3 v-else-if="type==='B'">B</h3>
    <h3 v-else-if="type==='C'">C</h3>
    <h3 v-else>Word!</h3>
</div>
<div id="for">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message: 'Hello Var!'
        }
    });
    var vm2=new Vue({
        el: "#if",
        data: {
            test:true,
            type: 'A'
        }
    });
    var vm3=new Vue({
        el: "#for",
        data: {
            items:[
                {message:"我"},
                {message:"的"},
                {message:"世"},
                {message:"界"},
            ]
        }
    });
</script>
</body>
</html>